<template>
  <view class="bjys" v-show="shade">
    <div class="videotype">
      <div class="search3">
        <div class="input">
          <navigator url="../search">
            <div class="input__text">
              搜你想搜看你想看
            </div>
          </navigator>
        </div>
        <div class="right">
          <image src="@/static/img/collect_btn_active.png" @click="collect"></image>
          <image src="@/static/img/fx.png" @click="share"></image>
        </div>
      </div>
    </div>
    <view class="flex_item">
      <view :class="num4 == index ? 'bor-ra':'bor-ra2'" @click="tabSelect1(item,index)"
        v-for="(item,index) in categoryMenu" :key="index">
        {{ item.name }}
        <view class="hengheng" v-if="num4 == index">

        </view>
      </view>
    </view>
    <!-- 推荐 start -->
    <view v-if="num4 == 0">
      <view class="content" v-if="hd">
        <view class="swiperItem">
          <swiper class="swiper3" :duration="1000" autoplay :interval="2000" circular :current="current"
            @change="change">
            <swiper-item v-for="(item,index) in hd" :key="index" @click="jumpBtn2(item.hd_url)">
              <view class="swiper3_item" :class="current==index?'swiper2_active':'swiper2_active'">
                <image class="" :src="item.hd_pic" mode="widthFix"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <scroll-view style="margin-bottom: 20rpx;" scroll-x class="nav" scroll-with-animation>
        <view class="cu-item" :data-id="index" v-for="(item,index) in indexInList" :key="index">
          <view class="cu-item_s" @click="tabSelect(item)">
            <view class="fl_item_img" :style="{'backgroundImage':'url('+item.pic+')' }"></view>
          </view>
          <view class="cu-item_te">{{ item.name}}</view>
        </view>

      </scroll-view>

      <view class="indexzxitem10">
        <view class="index_flex">
          <image src="@/static/img/zx.png" mode="widthFix"></image>
          <text class="indexzx_te1">最新视频</text><text style="color:#c19a46;">-每日更新</text>
        </view>
        <view class="index_flex2" @click="refreshBtn(0)">
          <image src="@/static/img/hyh.png" mode="widthFix"></image>
          <text class="indexzx_te2">换一换</text>
        </view>
      </view>

      <view class="indexbox">
        <view class="indexbox_left" v-for="(item,index) in zxlist" :key="index" @click="playBtn(item)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }">
          </view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>

          <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item.vod_id) == -1"
            @click.stop="sczt(item.vod_id)" mode="widthFix"></image>
          <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else @click.stop="sczt(item.vod_id)"
            mode="widthFix"></image>
          <view class="inl_content">{{ item.vod_name }}</view>
        </view>
      </view>

      <view class="indexzxitem10">
        <view class="index_flex">
          <image src="@/static/img/rm.png" mode="widthFix"></image>
          <text class="indexzx_te1">专题视频</text><text style="color:#c19a46;">-有你喜欢的</text>
        </view>
        <navigator url="/pages/imageList/index" class="index_flex2">
          <text class="indexzx_te2">立即查看</text>
          <image src="@/static/img/ckgd.png" mode="widthFix"></image>
        </navigator>
      </view>
      <navigator url="/pages/imageList/index" class="indexbox4" v-if="ztInList">
        <view :class="'indexbox_left' + index" v-for="(item,index) in ztInList" :key="index">
          <view class="inox_left_img" v-if="item.pic" :style="{'backgroundImage':'url('+item.pic+')' }">
          </view>
        </view>
      </navigator>
      <view class="indexzxitem10">
        <view class="index_flex">
          <image src="@/static/img/zx.png" mode="widthFix"></image>
          <text class="indexzx_te1">热门明星</text><text style="color:#c19a46;">-敬请关注</text>
        </view>
        <view class="index_flex2" @click="refreshBtn(1)">
          <image src="@/static/img/hyh.png" mode="widthFix"></image>
          <text class="indexzx_te2">换一换</text>
        </view>
      </view>

      <view class="indexbox3">
        <view class="indexbox_left" v-for="(item,index) in starlist" :key="index" @click="starBtn(item.star_id)">
          <view class="VIP_img" v-if="item.vod_vip == 2">
            VIP
          </view>
          <view class="inox_left_img" v-if="item.star_pic" :style="{'backgroundImage':'url('+item.star_pic+')' }">
          </view>
          <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
          </view>
          <view class="inl_content">{{ item.star_name }}</view>
        </view>
      </view>
      <view class="indexzxitem10" v-for="(item,index) in indexList" :key="index">

        <!-- 具体的标签 start -->
        <view class="index_flex">
          <image src="@/static/img/rm.png" mode="widthFix"></image>
          <text class="indexzx_te1">{{item.name}}</text><text style="color:#c19a46;">-最全的{{item.name}}素材</text>
        </view>
        <view class="index_flex2" @click="jumpBtn(item.tagid,item.css)">
          <text class="indexzx_te2">查看更多</text>
          <image src="@/static/img/ckgd.png" mode="widthFix"></image>
        </view>
        <!-- 具体的标签 end -->

        <!-- 广告图片  start -->
        <!-- <image class="image10" :src="item.gg" mode="widthFix"></image> -->
        <!-- 广告图片  end -->

        <view class="indexbox">
          <view :class="item.css == 'col-style-2'? 'indexbox_left':'indexbox_left2' " v-for="(item1,index1) in lmList"
            v-if="typeList[index].type == item1.vod_type" :key="index1" @click="playBtn(item1)">
            <view class="VIP_img" v-if="item1.vod_vip == 2">
              VIP
            </view>
            <view class="inox_left_img" v-if="item1.vod_pic" :style="{'backgroundImage':'url('+item1.vod_pic+')' }">
            </view>
            <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
            </view>
            <image class="inox_left_icon" src="@/static/img/collect_btn.png" v-if="scztList.indexOf(item1.vod_id) == -1"
              @click.stop="sczt(item1.vod_id)" mode="widthFix"></image>
            <image class="inox_left_icon" src="@/static/img/collect_btn_active.png" v-else
              @click.stop="sczt(item1.vod_id)" mode="widthFix"></image>
            <view class="inl_content">{{ item1.vod_name }}</view>
          </view>
        </view>
        <view class="image10" v-if="item.gg">
          <image :src="item.gg" mode="widthFix" @click="jumpBtn2(item.ggurl)"></image>
        </view>
      </view>
    </view>
    <!-- 推荐 end -->
    <view v-if="num4 != 0">

      <view class="indexbox1">
        <view :class="categoryMenu[num4].css == 'col-style-1' ? 'indexbox_left1':'indexbox_left0'"
          v-for="(item,index) in zuixinList" :key="index" >
          <view class="image11" @click="jumpBtn2(item.vod_url)" :style="{'backgroundImage':'url('+item.vod_pic+')' }" v-if="zuixinList && item.vod_url">

          </view>
          <view v-else @click="playBtn(item)">
            <view class="VIP_img" v-if="item.vod_vip == 2">
              VIP
            </view>
            <view class="inox_left_img" v-if="item.vod_pic" :style="{'backgroundImage':'url('+item.vod_pic+')' }">
            </view>
            <view class="inox_left_img" v-else :style="{'backgroundImage':'url('+gifUrl+')' }">
            </view>
            <image class="inox_left_icon1" src="@/static/img/collect_btn.png" mode="widthFix"></image>
            <view class="inl_content">{{ item.vod_name }}</view>
          </view>

        </view>
      </view>
    </view>
    <view class="addlog" v-if="isAddlog">
      <view class="box_add">
        <!-- <image src="@/static/img/e.png" mode="widthFix"></image> -->
        <image src="@/static/img/info_bg.jpg" mode="widthFix"></image>
        <view class="title">
          最新公告
        </view>
        <view class="content" v-html="qtgg">
        </view>
        <view class="button" @click="addlogBtn()">
          收到
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        isAddlog: false,
        scrollTop: 0,
        qtgg: '',
        shade: false,
        count: 1,
        indexList: [],
        hd: [],
        typeList: [], //type
        zuixinList: [],
        ztInList: [],
        lmList: [],
        gifUrl: 'https://www.tmtv777.com/img/logo.1cecf4f4.gif',
        starlist: [], // 明星数据
        zxlist: [], // 最新数据
        num4: 0,
        categoryMenu: ['推荐', 0, 0, 0, 0, 0, 0, 0, 0],
        indexInList: [],
        scztList: [],
        itemT: '',
        current: 0,
        page: 1,
        old: {
          scrollTop: 0
        }
      }
    },

    methods: {
      jumpBtn2(url) {
        plus.runtime.openURL(url, function() {
          console.log(res, 123)
        })
      },
      webBtn(url) {
        uni.navigateTo({
          url: '/pages/wevview?url=' + url
        })
      },
      addlogBtn() {
        this.isAddlog = false;
      },
      change(e) {
        let num = e.detail.current;
        this.current = num;
      },
      /**
       * 收藏
       */
      sczt(scid) {
        this.scztList = uni.getStorageSync('vod_id') || [];
        this.$http.sczt({
          scid: scid,
          token: uni.getStorageSync('phone')
        }).then(res => {
          if (res.code == 200) {
            if (res.message == '收藏成功') {
              this.$toast(res.message)
              this.scztList.push(scid);
              uni.setStorageSync('vod_id', this.scztList)
            } else if (res.message == '取消收藏') {
              this.scztList = uni.getStorageSync('vod_id') || [];
              this.scztList.slice().reverse().forEach((item, index, arr1) => {
                if (item === scid) {
                  this.scztList.splice(arr1.length - 1 - index, 1);
                }
              });
              uni.setStorageSync('vod_id', this.scztList)
              this.$toast(res.message)
            }
          }
        }).catch(err => {
          this.needLogin();
        })
      },
      needLogin() {
        let token = uni.getStorageSync('token') || 'none';
        if (token == 'none') {
          uni.showModal({
            title: '提示',
            content: "请登录！",
            success: function(res) {
              if (res.confirm) {
                uni.reLaunch({
                  url: '/pages/login/index'
                });
              }
            }
          })
        }
      },
      share() {
        uni.navigateTo({
          url: '../share'
        })
      },
      collect() {
        let token1 = uni.getStorageSync('token') || 'none';
        if (token1 == 'none') {
          this.needLogin();
          return;
        }
        uni.navigateTo({
          url: '../collect'
        })
      },
      playBtn(item) {
        uni.navigateTo({
          url: `../player?playid=${item.vod_id}`
        })
      },
      refreshBtn(index) {
        uni.showLoading({
          title: '加载中'
        })
        if (index == 0) {
          this.$http.zxlist().then(res => {
            if (res.code == 200) {
              this.zxlist = res.data.zxlist;
              uni.hideLoading();
            }
          })
        } else if (index == 1) {
          this.$http.starlist().then(res => {
            if (res.code == 200) {
              this.starlist = res.data.starlist;
              uni.hideLoading();
            }
          })
        }
      },
      tabSelect1(item, index) {
        uni.showLoading({
          title: '加载中'
        })
        this.page = 1;
        this.num4 = index;
        this.itemT = item.t;
        this.$http.tab1({
          p: this.page,
          t: item.t,
          l: 'lm'
        }).then(res => {
          if (res.code == 200) {
            this.zuixinList = res.data.tab1list;
            uni.hideLoading();
          }
        })
      },
      tabSelect(item) {
        uni.navigateTo({
          url: `/pages/tags/index?id=${item.tagid}&tag=tag`
        })
      },
      jumpBtn(index,css) {
        // console.log(index,123)
        uni.navigateTo({
          url: `/pages/tags/index?id=${index}&tag=type&css=css`
        })
      },
      starBtn(index) {
        uni.navigateTo({
          url: `/pages/tags/index?id=${index}&tag=star`
        })
      },
      upper: function(e) {
        console.log(e)
      },
      lower: function(e) {
        console.log(e)
      },
      scroll: function(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
    },
    onReachBottom() {
      if (this.num4 != 0) {
        uni.showLoading({
          title: '加载中'
        })
        this.page++;
        this.$http.tab1({
          p: this.page,
          t: this.itemT,
          l: 'lm'
        }).then(res => {
          if (res.code == 200) {
            if (res.data.tab1list == null) {
              this.$toast('没有更多了~');
              return;
            }
            this.zuixinList = this.zuixinList.concat(res.data.tab1list);
            uni.hideLoading();
          }
        })
      }
    },
    onLoad() {
      this.scztList = uni.getStorageSync('vod_id');
      this.$http.headList().then(res => {
        if (res.code == 200) {
          this.categoryMenu = res.data.head;
          setTimeout(() => {
            this.shade = true;
          }, 500)
        }
      })
      this.$http.indexIn().then(res => {
        if (res.code == 200) {
          this.qtgg = res.data.qtgg;
          if (res.data.qtggkg == '0') {
            this.isAddlog = true;
          }
          this.indexInList = res.data.tag; // 专栏
          this.hd = res.data.hd;
          this.ztInList = res.data.zt; // 专栏
          this.typeList = res.data.type;
          this.indexList = res.data.index;
        }
      })
      this.$http.lm().then(res => {
        if (res.code == 200) {
          this.lmList = res.data.lmlist;
        }
      })
      this.$http.zxlist().then(res => {
        if (res.code == 200) {
          this.zxlist = res.data.zxlist;
        }
      })
      this.$http.starlist().then(res => {
        if (res.code == 200) {
          this.starlist = res.data.starlist;
        }
      })
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f9faff;
  }

  .scrl_mop {
    margin-top: 60rpx;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;

  }

  .flex_item {
    width: 96%;
    margin-top: 40rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: flex-start;
    padding-left: 34rpx;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;

    .bor-ra {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      transform: scale(1.2);
      color: #fff;
    }

    .bor-ra2 {
      position: relative;
      display: flex;
      height: 56rpx;
      justify-content: center;
      margin-right: 30rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .hengheng {
      position: absolute;
      bottom: 4rpx;
      width: 20rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #FFFFFF;
    }
  }

  .cu-item_s {
    width: 130rpx;
    height: 130rpx;
    border: 1rpx solid red;
    border-radius: 50%;
    overflow: hidden;

    .fl_item_img {
      width: 100%;
      height: 100% !important;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 20rpx;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .cu-item_te {
    text-align: center;
  }

  .indexzxitem8 {
    margin-top: -70rpx !important;
  }

  .indexzxitem10 {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    min-height: 70rpx;

    .image10 {
      margin: 0 auto;
      border-radius: 10rpx;
      width: 96% !important;
      image{
        width: 100%;
      }
    }

    .index_flex2 {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
    }

    .index_flex {
      display: flex;
      align-items: center;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .indexbox2 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 60rpx;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 30%;
      height: 343rpx;
      box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 20rpx;
      background-color: #ddd;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: -50rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 10rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .indexbox3 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 60rpx;

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 165rpx;
      height: 225rpx;
      // box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      // border-radius: 50%;
      // background-color: #FFFFFF;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0rpx;
        text-align: center;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 165rpx;
        height: 165rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 50%;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .indexbox4 {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    margin-bottom: 360rpx;

    .indexbox_left1 {
      top: 30rpx !important;
      transform: translate(10%) scale(0.8) rotate(25deg) !important;
      // transform: translate(-45%) rotate(25deg) scale(0.8) !important;
    }

    .indexbox_left2 {
      top: 30rpx !important;
      transform: translate(-109%) scale(0.8) rotate(-25deg) !important;
      // transform: translate(-55%) rotate(-16deg) scale(0.8) !important;
    }

    .indexbox_left0 {
      z-index: 9;
      transform: translate(-50%) !important;
    }

    .indexbox_left0,
    .indexbox_left1,
    .indexbox_left2 {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: 15rpx;
      margin-bottom: 55rpx;
      width: 260rpx;
      height: 350rpx;
      box-shadow: 2rpx 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 30rpx;
      overflow: hidden;
      // background-color: #ddd;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -50rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 30rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }
    }
  }

  .indexbox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;

    // margin-bottom: 60rpx;
    .indexbox_left2 {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 30%;
      height: 343rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 290rpx;
        background-repeat: no-repeat;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 155rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;

          span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 5rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .indexbox_left {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 47%;
      height: 310rpx;
      // box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 20rpx 20rpx 0 0;
      // background-color: #ddd;

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 250rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.57);
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 275rpx;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .right {
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .indexbox1 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 60rpx;

    .indexbox_left0 {
      position: relative;
      margin: 0 auto 55rpx;
      width: 96%;
      height: 520rpx;
      box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 20rpx;
      // background-color: #ddd;
    }

    .indexbox_left1 {
      position: relative;
      margin: 0 auto 55rpx;
      width: 47%;
      height: 520rpx;
      box-shadow: 0 4rpx 10rpx rgba(51, 51, 51, 0.37);
      border-radius: 20rpx;
      background-color: #fff;
      overflow: hidden;

      .inox_left_icon1 {
        left: 80% !important;
      }
    }

    .indexbox_left0,
    .indexbox_left1 {
      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: -50rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        border-radius: 10rpx;
      }

      .inox_left_icon {
        position: absolute;
        top: 15rpx;
        left: 78%;
        width: 70rpx;
        height: 70rpx;
      }

      .inox_left_icon1 {
        position: absolute;
        top: 15rpx;
        left: 90%;
        width: 70rpx;
        height: 70rpx;
      }

      .videoBox-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 60rpx;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.58)));
        color: #fff;
        font-size: 12rpx;
        border-bottom-right-radius: 13rpx;
        border-bottom-left-radius: 10rpx;

        .vib_left {
          width: 20%;
          display: flex;
          align-items: center;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-left: 10rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .vib_right {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            margin-right: 20rpx;
            font-size: 28rpx;
            color: #FFFFFF;
          }

          image {
            margin-right: 0;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .swiper2_active {
    transform: scale(1.4);
  }

  .bjys2 {
    padding-top: 80rpx;
    padding-bottom: 20rpx;
    height: 170rpx;
    top: 0;
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;

    .title {
      position: relative;
      font-size: 32rpx;
      text-align: center;
      color: #FFFFFF;

      image {
        position: absolute;
        right: 30rpx;
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .content {
    // background-color: black;
    padding-bottom: 15rpx;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 210rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        position: absolute;
        top: 70rpx;
        bottom: 70rpx;
        left: 70rpx;
        right: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;
      }
    }
  }

  .addlog {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    height: 100vh;

    .box_add {
      position: relative;
      width: 80%;
      height: 800rpx;
      background-color: #FFFFFF;

      image {
        position: absolute;
        top: 0;
        width: 100%;
      }

      .title {
        position: absolute;
        top: 60rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 35rpx;
        text-align: center;
      }

      .content {
        padding: 20rpx;
        position: absolute;
        top: 125rpx;
        width: 100%;
        height: 600rpx;
        box-sizing: border-box;
      }

      .button {
        border-top: 1rpx solid #a0a0a0;
        padding: 20rpx;
        width: 100%;
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        font-size: 24rpx;
        transform: translateX(-50%);
        text-align: center;
      }
    }
  }

  .indexbox_left {
    overflow: hidden;

    .VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 99;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  }
.VIP_img {
      position: absolute;
      top: 0;
      padding: 5rpx 10rpx;
      left: 0;
      z-index: 99;
      border-radius: 0rpx 0 20rpx 0;
      color: #FFFFFF;
      background: linear-gradient(90deg, #fb4376, #e6d44f);
    }
  .image11 {
    // margin-bottom: 30rpx;
    width: 100%;
    height: 100%;
    // text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;

  }
</style>
